#include('head.html' , {title : '首页'})
<body class="">
  <section class="vbox" id="app">
    #include('header.html')
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
        <aside class="bg-black dk nav-xs aside hidden-print" id="nav">          
          #include('list.html')
        </aside>
        <!-- /.aside -->
  <section id="content">
          <section class="hbox stretch">
            <section>
              <section class="vbox">
                <section class="scrollable padder-lg w-f-md" id="bjax-target">
                  <a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
                  <h2 class="font-thin m-b">部分成员列表 <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                  <div class="row row-sm">
                    #set(i = 0)
                    #for(Users user : users)
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="bottom">
                            <span class="badge bg-info m-l-sm m-b-sm">
                              #if(user.m_studentNumber)
                              ${user.m_studentNumber.substring(0,4)}级
                              #else
                              null
                              #end
                            </span>
                          </div>
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              软件开发创客实验室成员
                            </div>
                            <div class="center text-center m-t-n">
                              <span class="thumb-sm avatar m-t-n-sm m-b-n-sm m-l-sm" style="width: 75px;">
                                <img src="/static/upload/img/${user.m_headPortrait}" alt="...">
                              </span><br><br>
                              <div class="text-info padder m-t-sm text-sm">
                                  ${user.m_realname}
                              </div><br><br>
                              <a href="users/${user.m_id}">查看详情</a>
                            </div>

                          </div>
                          <a href="#"><img data-original="https://api.berryapi.net/bing/random?607/1080&t=${i}" onerror="this.src='/static/upload/img/default1.jpg'" alt="" class="r r-2x img-full userimg"></a>
                        </div>
                        <div class="padder-v">
                          <a href="users/${user.m_id}" class="text-ellipsis">${user.m_realname}</a>
                          <a href="javascript:void(0)" class="text-ellipsis text-xs text-muted">${groups[i][0].g_gname}</a>
                        </div>
                      </div>
                    </div>
                    #set(i=i+1)
                    #end
                  </div>
                  <div class="row">
                    <div class="col-md-7">
                      <h3 class="font-thin">部分新成员列表</h3>
                      <div class="row row-sm">
                        #set(i=0)
                        #for(Users user : someNewMember)
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="/users/${user.m_id}">查看详细信息</i></a>
                                </div>
                              </div>
                              <a href="#"><img src="/static/upload/img/${user.m_headPortrait}" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="/users/${user.m_id}" class="text-ellipsis">${user.m_realname}</a>
                              <a href="javascript:void(0)" class="text-ellipsis text-xs text-muted">${showGroups[i][0].g_gname}</a>
                            </div>
                          </div>
                        </div>
                        #set(i=i+1)
                        #end

                      </div>
                    </div>
                    <div class="col-md-5">
                      <h3 class="font-thin">小组组长列表</h3>
                      <div class="list-group bg-white list-group-lg no-bg auto">

                        #set(i=0)
                        #for(Group group : headManList)
                        <a href="/users/${headManNameList[i][0].m_id}" class="list-group-item clearfix">
                          <!--<span class="pull-right h2 text-muted m-l">1</span>-->
                          <span class="pull-left thumb-sm avatar m-r">
                            <img src="/static/upload/img/${headManNameList[i][0].m_headPortrait}" alt="...">
                          </span>
                          <span class="clear">
                            <span>${headManNameList[i][0].m_realname}</span>
                            <small class="text-muted clear text-ellipsis">${group.g_gname}组长</small>
                          </span>
                        </a>
                        #set(i=i+1)
                        #end
                      </div>
                    </div>
                  </div>
                </section>
                #include('/footer.html')
              </section>
            </section>

          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>

#include('js.html')
  <script type="text/javascript" src="/static/js/lazyload.js"></script>
  <script>
      $("img.userimg").lazyload({
        placeholder: '/static/upload/img/defaultimg.jpg',
        effect: "slideDown"
      });
      <!--new Vue({-->
          <!--el : '#app'-->
      <!--});-->
      $("#refresh").click(function(){
          window.location.reload();
      });
  </script>
</body>
</html>